<script setup lang="ts">
import { onMounted, ref } from "vue-demi";
import { getRecMusic } from "@/api/content";
import { formatNumber } from "@/utils/util";

const lists = ref<any[]>([]);

onMounted(async () => {
  const res = await getRecMusic();
  lists.value = res.result;
});
</script>

<template>
  <h2 class="rec-title">推荐歌单</h2>
  <ul class="flex flex-wrap">
    <li
      class="w-1/3 px-0.5 mb-4"
      v-for="(item, index) in lists"
      :key="'rec' + index"
    >
      <router-link
        :to="{ name: 'playlist', params: { id: item.id } }"
        class="relative"
      >
        <div class="relative pb-full">
          <img
            class="absolute top-0 left-0 w-full z-1"
            :src="item.picUrl"
            alt=""
          />
          <span class="absolute top-1 right-1 z-10 pl-3 text-sm text-white">
            <SvgIcon icon="earphone"></SvgIcon>
            {{ formatNumber(item.playCount, 4) }}万</span
          >
        </div>
        <p class="pt-1.5 pr-1 pl-1.5 line-clamp-2 text-sm">{{ item.name }}</p>
      </router-link>
    </li>
  </ul>
</template>

<style lang="scss" scoped></style>
